<template>
	<view>
		<view class="statusBar"></view>
		<view class="diyNav">
			<view class="diyNavIcon hasFlex" @tap="backUp"><view class="iconfont icon-fanhui"></view></view>
			<view class="navTit">
				<view class="loreTit">{{loreName}}</view>
				<view class="taskName">{{taskName}}</view>
			</view>
			<!-- <view class="iconfont icon-jiucuo"></view> -->
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			loreName:String,
			taskName:String
		},
		methods:{
			backUp(){
				this.$emit('backUp');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.statusBar{
		width: 100%;
		position: fixed;
		top: 0;
		height: var(--status-bar-height);
		z-index: 10000;
		background: #fff;
	}
	.diyNav{
		width: 100%;
		@include respTo(phone){
			height: $pss-height90;
		}
		@include respTo(pad){
			height: 70rpx;
		}
		position: fixed;
		left: 0;
		top: var(--status-bar-height);
		z-index: 1000;
		display: flex;
		background: $pss-colorFFF;
		border-bottom: 1rpx solid #eee;
		// box-shadow: 0 6rpx 6rpx rgba(0,0,0,.05);
		.icon-jiucuo{
			width: 15%; 
			height: 100%;
			line-height:90rpx;
			font-size: 50rpx;
			color: $pss-text-color3;
			text-align: center;
		}
		.navTit{
			width: 70%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			.loreTit{
				color: $pss-text-color3;
				font-weight: bold;
				@include respTo(phone){
					font-size: $font-size34;
				}
				@include respTo(pad){
					font-size:$padSize24;
				}
			}
			.taskName{
				@include respTo(phone){
					font-size: $font-size28;
				}
				@include respTo(pad){
					font-size: $padSize18;
				}
				color: $pss-text-colora;
			}
		}
		.diyNavIcon{
			height: 100%;
			justify-content: center;
			align-items: center;
			@include respTo(phone){
				width: 15%;
			}
			@include respTo(pad){
				width: 10%;
			}
			.icon-fanhui{
				color: $pss-text-color8;
				@include respTo(phone){
					font-size: 44rpx;
				}
				@include respTo(pad){
					font-size: 30rpx;
				}
			}
		}
	}
</style>